<template>
  <!-- 导航栏样式优化 -->
  <div class="invite-container">
    <van-nav-bar title="我的邀请" left-text="返回" left-arrow @click-left="onClickLeft" class="custom-nav" />

    <!-- 头部区域样式优化 -->
    <div class="header-section">
      <div class="title">邀请好友得分成</div>
      <div class="subtitle">只有邀请的好友消费后才能获得分成</div>
    </div>

    <!-- 邀请码区域样式优化 -->
    <div class="invite-code-section">
      <van-cell-group inset>
        <van-field v-model="text" center clearable label="我的邀请码" readonly class="invite-code-field">
          <template #button>
            <van-button size="small" type="primary" @click="copyText()" class="copy-btn">复制</van-button>
          </template>
        </van-field>
      </van-cell-group>
    </div>

    <!-- 邀请按钮样式优化 -->
    <div class="invite-btn-section">
      <van-button class="invite-now-btn" @click="inviteDialog()">
        立马邀请
      </van-button>
    </div>


    <!-- 二维码弹窗 -->
    <el-dialog v-model="dialogVisible" width="420" :before-close="handleClose">
      <div class="qr-code-container">
        <div class="qr-welcome">欢迎您使用该充电桩APP</div>
        <img :src="qrCodeData" alt="QR Code" width="300" height="300">
      </div>
    </el-dialog>

    <!-- 统计信息区域样式优化 -->
    <div class="stats-section">
      <div class="stats-title">我已邀请的好友</div>
      <div class="stats-grid">
        <div class="stats-item">
          <span>累计邀请：</span>
          <span class="highlight">{{ count }}人</span>
        </div>
        <div class="stats-item">
          <span>已获得收益：</span>
          <span class="highlight">{{ income }}元</span>
        </div>
        <div class="stats-item">
          <span>在途收益：</span>
          <span class="highlight">{{ incoming }}元</span>
        </div>
      </div>
    </div>

    <!-- 列表头部样式优化 -->
    <div class="list-header">
      <van-cell-group>
        <van-cell title="昵称" value="邀请时间" class="list-header-cell" />
      </van-cell-group>
    </div>

    <!-- 列表区域样式优化 -->
    <div class="list-section">
      <van-list :finished="finished" finished-text="没有更多了">
        <van-cell v-for="item in list" :key="item" :title="item.nickName" :value="item.invitedTime" class="list-item" />
      </van-list>
    </div>
  </div>
</template>


<script setup>
const onClickLeft = () => history.back();
import { GetUserInfo, GetInvited, GetInvitedIncome } from '@/api/user.js'
import { ref } from 'vue';
import { showFailToast, showSuccessToast } from 'vant';
import qrcode from 'qrcode';



const list = ref([]);
// const loading = ref(false);
const finished = ref(false);

const count = ref(0);
const income = ref(0.0)
const incoming = ref('')

const text = ref('');

function copyText() {
  navigator.clipboard.writeText(text.value).then(
    () => showSuccessToast('复制成功'),
    () => showFailToast('复制失败')
  );
}
getUserInfo();
function getUserInfo() {
  GetUserInfo()
    .then(res => {
      if (res.data.code == 200000) {
        text.value = res.data.data.inviteCode
      }
    })
}
getInvited();
function getInvited() {
  GetInvited()
    .then(res => {
      if (res.data.code == 200000) {
        if (res.data.data != null) {
          list.value = res.data.data
          count.value = res.data.data.length
        } else {
          count.value = 0
        }
      }
    })
}
getInvitedIncome();
function getInvitedIncome() {
  GetInvitedIncome()
    .then(res => {
      if (res.data.code == 200000) {
        console.log(res.data.data)
        income.value = res.data.data.income
        incoming.value = String(res.data.data.invitingIncome)
        console.log(res.data.data)
      }
    })
}
// 二维码弹窗
const dialogVisible = ref(false)
const qrCodeData = "该功能正在开发中......."; // 替换为你需要生成二维码的数据

function inviteDialog() {
  dialogVisible.value = true
  qrcode.toDataURL(qrCodeData, (err, url) => {
    if (err) {
      console.error(err);
    } else {
      this.qrCodeData = url;
    }
  });
}


</script>

<!-- 添加样式部分 -->
<style scoped>
.invite-container {
  min-height: 100vh;
  background-color: #f7f8fa;
}

.custom-nav {
  background: linear-gradient(to right, #ff6034, #ee0a24);
}

.custom-nav :deep(.van-nav-bar__title),
.custom-nav :deep(.van-nav-bar__text),
.custom-nav :deep(.van-icon) {
  color: white;
}

.header-section {
  padding: 24px 16px;
  background: white;
  margin-bottom: 12px;
}

.title {
  font-size: 24px;
  font-weight: bold;
  color: #ff6034;
  text-align: center;
  margin-bottom: 8px;
}

.subtitle {
  font-size: 14px;
  color: #666;
  text-align: center;
}

.invite-code-section {
  padding: 0 16px;
  margin-bottom: 16px;
}

.invite-code-field {
  background: white;
  border-radius: 8px;
}

.copy-btn {
  border-radius: 4px;
}

.invite-btn-section {
  padding: 0 16px;
  margin-bottom: 20px;
}

.invite-now-btn {
  width: 100%;
  height: 44px;
  font-size: 16px;
  font-weight: bold;
  background: linear-gradient(to right, #ff6034, #ee0a24);
  border: none;
  border-radius: 22px;
  color: white;
}

.stats-section {
  background: white;
  padding: 16px;
  margin-bottom: 12px;
  border-radius: 8px;
  margin: 0 16px 16px 16px;
}

.stats-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 16px;
}

.stats-grid {
  display: grid;
  gap: 12px;
}

.stats-item {
  color: #666;
  font-size: 14px;
}

.highlight {
  color: #ff6034;
  font-weight: bold;
  margin-left: 4px;
}

.list-header {
  margin: 0 16px;
}

.list-header-cell {
  background-color: #f5f7fa;
  border-radius: 8px 8px 0 0;
  font-weight: bold;
}

.list-section {
  margin: 0 16px;
}

.list-item {
  border-bottom: 1px solid #eee;
}

.list-item:last-child {
  border-bottom: none;
  border-radius: 0 0 8px 8px;
}

.qr-code-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

.qr-welcome {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 24px;
}

.qr-code-container img {
  max-width: 300px;
  height: auto;
}
</style>
